<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js?v=${ver}" type="text/javascript"></script>
<#include "/common/pagerForm.html">
<form rel="pagerForm" method="post" action="${rc.getContextPath()}/manage/operationplanRate/view">
    <input type="hidden" name="operationCode" value="${condition.operationCode!''}" />
</form>
<div class="pageContent">
    <div class="panelBar">
        <ul class="toolBar">
            <li><a id="exportToExcel" class="export" href="${rc.getContextPath()}/manage/operationplanRate/exportDetailToExcel?tableId=operationView&operationCode=${condition.operationCode!''}" 
            target="multiExport" tableId="operationView"  targetType="navTab" title="<@label key='confirmexportToExcel.M'>确定要导出这些记录吗?</@label>">
            <span><@label key="exportToExcel.D">导出EXCEL</@label></span></a></li>
        </ul>
    </div>
    <table class="table" id="operationView" width="140%" layoutH="400">
        <thead>
            <tr>
                <th width="30"><@label key="serialNumber.C">序号</@label></th>
                <th width="60" field="operationTaskNum"><@label key='operationTaskNum.C'>工序任务单</@label></th>
                <th width="100" field="workCenterCode"><@label key="workCenterCode.C">工作中心编号</@label></th>
                <th width="100" field="workCenterText"><@label key="workCenterText.C">工作中心名称</@label></th>              
                <th width="100" field="workUnitCode"><@label key='plannedWorkUnitCode.C'>计划作业单元</@label></th>
                <th width="100" field="workCenterText"><@label key='plannedWorkUnitText.C'>计划作业单元描述</@label></th>                
                <th width="50" field="plannedQuantity"><@label key='plannedQuantity.C'>计划数量</@label></th>
                <th width="50" field="completedQuantity"><@label key='completedQuantity.C'>完工数量</@label></th>
                <th width="120" field="plannedStartDateTime"><@label key='plannedstartDateTime.C'>计划开始时间</@label></th>
                <th width="120" field="actualStartDateTime"><@label key='actualstartDateTime.C'>实际开始时间</@label></th>
                <th width="120" field="plannedendDateTime"><@label key='plannedendDateTime.C'>计划结束时间</@label></th>
                <th width="120" field="actualEndDateTime"><@label key='actualendDateTime.C'>实际结束时间</@label></th>
                          
            </tr>
        </thead>
        <tbody>
        <#if page??><#if (page.data?size>0)> <#list page.data as operationTask>
            <tr target="operationTask_Num" rel="${operationTask.operationTaskNum!''}" 
            plannedQuantity="${operationTask.plannedQuantity!''}" completedQuantity="${operationTask.completedQuantity!''}">
                <td>${page.startRow + operationTask_index}</td>
                <td>${operationTask.operationTaskNum!''}</td>
                <td>${operationTask.workCenterCode!''}</td>                
                <td>${operationTask.workCenterText!''}</td>
                <td>${operationTask.workUnitCode!''}</td>
                <td>${operationTask.workUnitText!''}</td>
                <td>${operationTask.plannedQuantity!''}</td>
                <td>${operationTask.completedQuantity!''}</td>  
                <td>${(operationTask.plannedStartDateTime?string("yyyy-MM-dd HH:mm:ss"))?if_exists}</td>
                <td>${(operationTask.actualStartDateTime?string("yyyy-MM-dd HH:mm:ss"))?if_exists}</td>
                <td>${(operationTask.plannedendDateTime?string("yyyy-MM-dd HH:mm:ss"))?if_exists}</td>
                <td>${(operationTask.actualEndDateTime?string("yyyy-MM-dd HH:mm:ss"))?if_exists}</td>
            </tr>
        </#list>
        <#else>
        <tr>
                <td colspan="12" class="noData">======<@label key='noListData.C'>列表无数据</@label>=====</font></td>
        </tr>
        </#if>
        <#else>
        <tr>
                <td colspan="12" class="noData">======<@label key='noListData.C'>列表无数据</@label>=====</font></td>
        </tr>
        </#if>
        </tbody>
    </table>
    <#include "/common/dialogPanelBar.html">
    <div class="unitBox" id="chartHolder" style="float: left; display: block; overflow: hidden; width: 100%; height:280px;background: #fff">
        
    </div>
    <div class="formBar">
        <ul>
            <li>
                <div class="buttonActive"><div class="buttonContent"><button type="button" class="close"><@label key="close.B">关闭</@label></button></div></div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
var operationPlan = {
    xData : [],
    yData0 : [],
    yData1 : [],
    option : {
    	color : ['#3398DB','#c23531'],
        tooltip : {
            trigger: 'axis'
        },
        legend : {
            data:['计划数量','实际数量']
        },
        toolbox: {
            show : true
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [ {
            type : 'bar',
            name : '计划数量',
            itemStyle : {
                normal : {
                    label : {
                        show : true,
                        position : 'top',
                        formatter : '{c}'
                    }
                }
            },
            markPoint : {
                tooltip : {
                    trigger : 'item',
                    backgroundColor : 'rgba(0,0,0,0)',
                },
                data : []
            }
        }, {
        	type : 'bar',
        	name : '实际数量',
			itemStyle : {
                normal : {
                    label : {
                        show : true,
                        position : 'top',
                        formatter : '{c}'
                    }
                }
            },
            markPoint : {
                tooltip : {
                    trigger : 'item',
                    backgroundColor : 'rgba(0,0,0,0)',
                },
                data : []
            }
        }],
        
        noDataLoadingOption:{
           text :"<@label key='noData.C'>暂无数据</@label>",
           effect : 'whirling',
           effectOption:{
               backgroundColor:"#fff"
           },
           textStyle : {
             fontSize : 20
           }
        }
     }
}
$(function() {
    $("tr[target='operationTask_Num']", $.pdialog.getCurrent()).each(function(){
        operationPlan.xData.push($(this).attr("rel"));
        operationPlan.yData0.push($(this).attr("plannedQuantity"));
        operationPlan.yData1.push($(this).attr("completedQuantity"));
    });
    
    require.config({
        paths : {
               echarts : '${rc.getContextPath()}/manage/js/echarts'
           }
       });
       require(
           [
               'echarts',
               'echarts/theme/macarons',
               'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
               'echarts/chart/bar'
               
           ],
           function (ec) {
               var myChart = ec.init($('#chartHolder', $.pdialog.getCurrent())[0]);
               operationPlan.option.xAxis[0].data = operationPlan.xData;
               operationPlan.option.series[0].data = operationPlan.yData0;
               operationPlan.option.series[1].data = operationPlan.yData1;
               myChart.setOption(operationPlan.option,true);
              /*  //设置导出
               var $exportToExcel = $("#exportToExcel",$.pdialog.getCurrent());
               $exportToExcel.data("myChart",myChart); */
           }); 
       
});
</script>